@charset "utf-8";

.bg{
    height: 1727px;
    background: #f6f6f6;
}

.bannerphoto{
    min-width: 1280px;
    height: 220px;
    img{
    width: 100%;
    margin-top: -1px;
}
}

.nownav{
    width: 100%;
    height: 24px;
    margin-top: 17px;
    margin-bottom: 27px;
    
    p{
        font-size: 13px;
        line-height: 24px;
        margin-left: 160px;
    }
}



.xilie{
    width: 100%;
    height: 129px;
    margin: 0 auto;
    margin-bottom: 29px;
    
    
}
.xiliecontent{
    ul{
        width: 1120px;
        height: 129px;
        margin-left: 160px;
        li{
            width: 206px;
            height: 129px;
            font-size: 28px;
            line-height: 100px;
            background: #cac9c9;
            text-align: center;
            float:left; 
            margin-left: 5px;
            transition:all 0.6s linear 300ms;
            &:hover{
                transform: scaleX(1.2);
                background: #2072f9;
                color: white;
                 
            }
            &:first-of-type{
                width: 292px;
                height: 129px;
                background: #2072f9;
                font-size: 28px;
                line-height: 100px;
                color: white;
                text-align: center;
                position: relative;
               img{
                   position: absolute;
                   left: 129px;
                   bottom: 25px;
                   transition:all 0.6s linear 300ms; 
                   animation-direction: reverse;
                   animation: icon 0.6s linear 300ms infinite;
                   
                   @-webkit-keyframes icon{
                       0%{ -webkit-transform:translateY(-20px);}
                       30%{-webkit-transform:translateY(10px);}
                       60%{-webkit-transform: translateY(-10px);}
                       100%{-webkit-transform: scale(1); -webkit-transform:translateY(5px);}
                   }
                   @keyframes icon{
                       0%{transform: scale(1.2);transform: translateY(-20px);}
                       30%{transform:translateY(10px);}
                       60%{transform: translateY(-10px);}
                       100%{transform: scale(1);transform: translateY(0px);}
                   }
                   &:hover{
                       transform: translateY(130px);
                   }
               }
            }
            
            &:nth-of-type(3){
                width: 233px;
                height: 129px;
                margin-left: 5px;
            }
        }
    }
    
}

.search{
    width: 100%;
    margin-bottom: 26px;
}

.searchcontent{
    width: 356px;
    height: 48px;
    border: 1px solid #000000;
    position: relative;
    margin-left: 760px;
    
    input[type="search"]{
        display: inline-block;
        width: 299px;
        height: 48px;
        text-indent: 4px;
        background: #f6f6f6;
        
    }
    .searchbutton{
        width: 57px;
        height: 48px;
        background: #000000;
        position: absolute;
        right: 0;
        top: 0;
        input[type="image"]{
           position: absolute;
           left: 15px;
           top: 11px;
        }
    }
}


.productshowcontent{
    width: 976px;
    height: 803px;
    margin: 0 auto;
    ul{
        
        li{
            width: 323px;
            height: 265px;
            border: 1px solid #d2d2d2;
            float: left;
            background: #FFFFFF;
            transition: all 0.6s linear 300ms;
            
            &:hover{
                    transform: translateX(-5px) translateY(-10px);
                    border: 1px solid skyblue;
                }
             
            .show1{
//              width: 135px;
//              height: 145px;
                margin: 22px 99px 16px 103px;
                width: 159px;
                height: 159px;
               
                
            }
            h4{
                font-size: 17px;
                line-height: 35px;
                color: #2072f9;
                text-align: center;
            }
            p{
                width: 286px;
                font-size: 12px;
                white-space: nowrap;
                overflow: hidden;
                text-overflow: ellipsis;
                margin-left: 18px;
            }
        }
    }
    
}


.fenye{
    width: 100%;
    margin-top: 54px;
    margin-bottom: 300px;
    ul{
        width: 504px;
        margin: 0 auto;
        li{
            width: 60px;
            height: 48px;
            float: left;
            text-align: center;
            line-height: 48px;
            margin-left: 3px;
           
            
            &:nth-of-type(2){
                background: #2072f9;
            }
            a{
                display: inline-block;
                width: 60px;
                height: 48px;
                color: #282828;
                &:hover{background: #2072f9;
                    
                }
            }
            &:first-of-type,&:last-of-type{
                width: 60px;
                height: 48px;
                font-size: 18px;
                line-height: 48px;
                
            }
        }
    }
}
